<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>数据类型</title>
		<link rel="stylesheet" href="../../jquery/development-bundle/themes/base/jquery.ui.all.css" />
		<link rel="stylesheet" href="../../jqGrid/css/ui.jqgrid.css" />
		
		<script type="text/javascript" src="../../jquery/js/jquery-1.7.2.min.js"></script>
		<script src="../../jquery/development-bundle/ui/jquery.ui.core.js"></script>
		<script src="../../jquery/development-bundle/ui/jquery.ui.widget.js"></script>
		<script src="../../jquery/development-bundle/ui/jquery.ui.mouse.js"></script>
		<script src="../../jquery/development-bundle/ui/jquery.ui.draggable.js"></script>
		<script src="../../jquery/development-bundle/ui/jquery.ui.position.js"></script>
		<script src="../../jquery/development-bundle/ui/jquery.ui.resizable.js"></script>
		<script src="../../jquery/development-bundle/ui/jquery.ui.dialog.js"></script>
		<script src="../../jqGrid/js/jquery.jqGrid.min.js"></script>
		<script src="../../jquery/development-bundle/ui/jquery.ui.dialog.js"></script>
		<script type="text/javascript">
			$(function(){
				jQuery("#myTab").jqGrid({  
		        datatype: "json", //将这里改为使用JSON数据  
		        url:'xtjs.do?theAction=getGridJson', //这是Action的请求地址  
		        mtype: 'POST',  
		        //autoheight:true,
		        height: 430,
		        //scroll: true, 
		        autowidth:true, //自动调整宽度
		        colNames:['id','角色名称','是否有效', '角色描述'],  
		        colModel:[
		        	{name:'id',index:'id', width:'5%',hidden:true,align:'center'},   
		            {name:'jsmc',index:'jsmc', width:'30%',align:'center'},  
		            {name:'sfyx',index:'sfyx', width:'20%',align:'center'},  
		            {name:'jsms',index:'jsms', width:'25%',align:'center'}       
		        ],  
		        pager: 'pager1', //分页工具栏  
		        rowNum:15, //每页显示记录数  
		        viewrecords: true, //是否显示行数  
		        rowList:[15,30,60,100,1000], //可调整每页显示的记录数  
		        multiselect: true, //是否支持多选  
		        sortname: 'jsmc', //首次加载要进行排序的字段 
		        sortorder: "asc", //排序方式
		        //loadonce:true, //一次加载所有数据
		        onSortCol: function (index, colindex, sortorder){
								//列排序事件
				 				//alert('onSortCol index=>'+index +" colindex=>"+colindex +" sortorder=>"+sortorder);
	
				},
				gridview:true, 
		        caption: "角 色 信 息" ,
		        jsonReader: {      
	        		root: "rows",    
	        		repeatitems : false      
	     		} ,
	     		userDataOnFooter : true, //总计
	     		//altRows : true,         //
	     		footerrow:true      
		    	}).navGrid("#pager1",{del:false,add:false,edit:false,search:true,refresh:true},{},{},{},{multipleSearch:true});
			
				$('#btAdd').click(function(){
					$( "#dialog" ).dialog();
				});
				
				$('#btMod').click(function(){
				
				});
				
				$('#btDel').click(function(){
				
				});
			})
		</script>
		
	</head>

	<body class="">
		<div title="Basic dialog" id="dialog" style="display:none;">
			<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
		</div>
	
		<form action="xtjs.do" method="post">
			<!-- 多功能操作区 -->
			<div class="toolbox">
				<!-- 按钮 -->
				<input type="button" value="新增" id="btAdd">
				<input type="button" value="修改" id="btMod">
				<input type="button" value="删除" id="btDel">
				<!-- 按钮 -->
			</div>
			<table id="myTab" cellpadding="0" cellspacing="0">
				<thead>
					
				</thead>
				<tbody></tbody>
			</table>
			<div id="pager1"></div>
		</form>
		<!-- 内容显示区结束 -->
	</body>
</html>
